import { PlusOutlined } from '@ant-design/icons';
import { Button, Form, Image, Input, Upload } from 'antd';

const UserForm = ({ type, userInfo, setUserInfo, submitHandle }) => {
  // const [form] = Form.useForm();
  // if (form && userInfo && type === 'edit') {
  //   form.setFieldsValue(userInfo);
  // }

  const updataInfo = (newVal, key) => {
    const newInfo = { ...userInfo };
    newInfo[key] = newVal;
    setUserInfo(newInfo);
  };

  const currentAvatar =
    type === 'edit' ? (
      <Form.Item label="当前头像" name="avatar">
        <Image style={{ width: '80px' }} src={userInfo?.avatar} />
      </Form.Item>
    ) : null;

  return (
    <div>
      <Form
        name="adminForm"
        onFinish={submitHandle}
        autoComplete="off"
        initialValues={userInfo}
      >
        <Form.Item
          label="登录账号"
          name="loginId"
          validateTrigger="onBlur"
          rules={[
            {
              required: true,
              message: '请输入登录账号',
            },
          ]}
        >
          <Input
            value={userInfo?.loginId}
            disabled={type === 'add' ? false : true}
            onChange={(e) => {
              updataInfo(e.target.value, 'loginId');
            }}
          />
        </Form.Item>

        <Form.Item
          label="登录密码"
          name="loginPwd"
          rules={[
            type === 'edit'
              ? {
                  required: true,
                  message: '请输入登录密码',
                }
              : null,
          ]}
        >
          <Input.Password
            value={userInfo?.loginPwd}
            placeholder={type === 'add' ? '密码可选，默认为123123' : ''}
            onChange={(e) => {
              updataInfo(e.target.value, 'loginPwd');
            }}
          />
        </Form.Item>
        <Form.Item label="用户昵称" name="nickname">
          <Input
            value={userInfo?.nickname}
            placeholder="昵称可选，默认为新用户"
            onChange={(e) => {
              updataInfo(e.target.value, 'nickname');
            }}
          />
        </Form.Item>
        {currentAvatar}
        <Form.Item label="用户头像" valuePropName="fileList">
          <Upload
            listType="picture-card"
            maxCount={1}
            action="/api/upload"
            onChange={(e) => {
              if (e.file.status === 'done') {
                const url = e.file.response.data;
                updataInfo(url, 'avatar');
              }
            }}
          >
            <div>
              <PlusOutlined /> <div style={{ marginTop: '8px' }}>头像可选</div>
            </div>
          </Upload>
        </Form.Item>
        <Form.Item label="用户邮箱" name="mail">
          <Input
            value={userInfo?.mail}
            placeholder="选填"
            onChange={(e) => {
              updataInfo(e.target.value, 'mail');
            }}
          />
        </Form.Item>
        <Form.Item label="QQ号码" name="qq">
          <Input
            value={userInfo?.qq}
            placeholder="选填"
            onChange={(e) => {
              updataInfo(e.target.value, 'qq');
            }}
          />
        </Form.Item>
        <Form.Item label="微信号" name="wechat">
          <Input
            value={userInfo?.wechat}
            placeholder="选填"
            onChange={(e) => {
              updataInfo(e.target.value, 'wechat');
            }}
          />
        </Form.Item>
        <Form.Item label="自我介绍" name="intro">
          <Input.TextArea
            rows={6}
            value={userInfo?.intro}
            placeholder="选填"
            onChange={(e) => {
              updataInfo(e.target.value, 'intro');
            }}
          />
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 5, span: 16 }}>
          <Button type="primary" htmlType="submit">
            {type === 'add' ? ' 确认新增' : '确认修改'}
          </Button>
          <Button type="link">重置</Button>
        </Form.Item>
      </Form>
    </div>
  );
};

export default UserForm;
